<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../Images/font/iconfont.css">
    <link rel="stylesheet" href="../css/shopping cart.css">
</head>

<body>
    <!-- 头部开始 -->
    <header class="mall-header">
        <div class="header-top">
            <div class="header-topbar">
                <div class="topbar-user">
                    <a href="../html/login.html">登录</a>
                    &nbsp;或 &nbsp;
                    <a href="../html/enroll.html">注册</a>
                    &nbsp;ANTA会员
                </div>
                <div class="topbar-cart">
                    <a href="../html/shopping cart.html" class="iconfont icon-gouwuche">
                    </a>
                </div>
                <div class="topbar-service">
                    <a href="javascript:;" class="iconfont icon-erji"></a>
                </div>
                <div class="topbar-en">EN</div>
            </div>
        </div>
        <div class="header-nav">
            <div class="center">
                <div class="header-logo">
                    <div class="logo-inner">
                        <a href="../html/index.html"><img src="../Images/10005.svg" alt=""></a>
                    </div>
                </div>
            </div>
            <ul class="header-list">
                <li> <a href="javascript:;"><b>冬奥国旗款</b></a>
                </li>
                <li><a href="javascript:;"><b>男子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>运动鞋</li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>户外综训鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>外套夹克</li>
                                    <li>羽绒服/马甲</li>
                                    <li>短袖T恤</li>
                                    <li>长裤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜子</li>
                                </ul>
                                <ul>
                                    <li><b>运动项目</b></li>
                                    <li>跑步</li>
                                    <li>篮球</li>
                                    <li>综训</li>
                                    <li>生活</li>
                                    <li>健身</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>女子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>棉鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>羽绒服</li>
                                    <li>套头卫衣</li>
                                    <li>外套、夹克</li>
                                    <li>长裤</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童安踏</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li>新品上市</li>
                                    <li>男中大童</li>
                                    <li>女中大童</li>
                                    <li>男小童</li>
                                    <li>女小童</li>
                                    <li>婴童</li>
                                </ul>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>足球鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>羽绒服</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                    <li>长裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童</b></a>
                </li>
                <li><a href="javascript:;"><b>品牌文化</b>
                    </a></li>
                <li><a href="javascript:;"><b>观赏视频</b>
                    </a></li>
                <li><a href="javascript:;"><b>联系我们</b>
                    </a></li>
                <li class="nav-item last">
                    <div class="nav-search-box">
                        <a href="../html/detail page.html" class="nav-search-btns"><img src="../Images/10007.svg"
                                alt=""></a>
                        <input type="text" placeholder="搜索">
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- 头部结束 -->

    <!-- 物品栏 -->
    <div class="car-list">
        <div class="car-title">
            <span style="margin-left: 10px;">全选</span>
            </label>
            <ul class="clearfix">
                <li>商品</li>
                <li>单价</li>
                <li>数量</li>
                <li>小计</1i>
                <li>操作</li>
            </ul>
        </div>
        <div class="car-content">
            <!--  <ul>
                <b class="shop-img"><img src="../Images/10021.jpg"></b>
                <p class="shop-name">安踏竞速挑战系列马赫女子跑鞋</p>
                <div class="price">￥ <span>299</span></div>
                <div class="inpur-num">
                    <div class="minnum">-</div>
                    <input type="text" class="num" value="1">
                    <div class="addnum">+</div>
                </div>
                <div class="xiaoji">￥ <span>299</span></div>
                <div class="delshop">删除</div>
            </ul>
            <ul>
                <b class="shop-img"><img src="../Images/10028.jpg"></b>
                <p class="shop-name">安踏进阶训练系列火星泡棉女跑鞋</p>
                <div class="price">￥ 399</div>
                <div class="inpur-num">
                    <div class="minnum">-</div>
                    <input type="text" class="num" value="1">
                    <div class="addnum">+</div>
                </div>
                <div class="xiaoji">￥ <span>299</span></div>
                <div class="delshop">删除</div>
            </ul> -->
        </div>

    </div>
    <!-- 结算 -->
    <div class="cat-tool">
        <section>
            <div>
                <span class="zongji">已选择&nbsp;<span class="zongji" id="count">2</span>&nbsp;件商品</span>
            </div>
            <div>
                <span class="zongji">总计：</span>
                <span class="zongji" id="money">¥ 698</span>
            </div>
            <ction>
                <div class="account">立即结算</div>
    </div>
</body>
<!-- <div class="cart-foot">
    <div class="sum-main w-1263">
        <div class="sum-infos fl">
            <div class="sum-operate fl">
                <label class="checkbox-label checkbox-all">
                    <input type="checkbox" class="checkbox-input">
                    <span>全选商品</span>
                </label>
                <a href="javascript:;" class="delete-multi">删除商品</a>
            </div>
            <div class="sum-totalprice fr">
                <span>总价</span>
                <span class="price">￥0.00</span>
            </div>
        </div>
        <div class="sum-to-settle fl">
            <a href="javascript:;" class="btn-to-settle">结算</a>
        </div>
    </div>
</div> -->
<!-- 尾部开始 -->
<div class="footer">
    <div class="footer-main">
        <div class="footer-center">
            <div class="main-logo">
                <img src="../Images/10002.svg" alt="">
            </div>
            <div class="main-ft">
                <div class="service-one">
                    <h4>
                        在线客服
                        <span><img src="../Images/10006.svg" alt=""></span>
                    </h4>
                    <h4>
                        在线资讯
                        <span>400-858-2020</span>
                    </h4>
                </div>
                <div class="service-two">
                    <img src="../Images/10003.jpg" alt="">
                </div>
            </div>
            <div class="company">
                <p>Copyright(C) 2012-2020 by www.ANTA.cn&nbsp;&nbsp;
                    &copy;安踏体育用品有限公司版权所有&nbsp;&nbsp;营业执照&nbsp;&nbsp;开户许可证&nbsp;&nbsp;个人信息保护政策</p>
                <span>闽ICP备2021011550号-2nbsp;&nbsp;闽公网安备35020302033806号</span>
            </div>
        </div>
    </div>
</div>
<!-- 侧边导航 -->
<div class="web-cover"></div>
<!-- 尾部结束 -->
</body>
<script src="../Images/js/jquery.js"></script>
<script src="../Images/js/cook.js"></script>



</html>
<script>
    $(".cover-top").on("click", function () {
        $("html,body").animate({  // 让body和html回到顶部
            scrollTop: 0
        }, 1000)
    })
    // -------------4.将商品页渲染到购物车里面---------
    getShoppingCart()
    function getShoppingCart() {
        $.get("../Images/php/getShoppingCart.php", { "vipName": getCookie("username") }, function (data) {

            let str = '';
            let sum = 0;
            let count = 0;
            data.forEach(function (item, index) {
                str += ` <ul goodsid="${item.goodsId}" >
            <input type="checkbox" class="check" checked="checked">
            <b class="shop-img"><img src="${item.goodsImg}"></b>
            <p class="shop-name">"${item.goodsName}"</p>
            <div class="price">￥${item.goodsPrice}</div>
            <div class="inpur-num">
                <div class="minnum">-</div>
                <input type="text" class="num" value="${item.goodsCount}">
                <div class="addnum">+</div>
            </div>
            <div class="xiaoji">￥ ${parseInt(item.goodsPrice * item.goodsCount)}</div>
            <div class="delshop">删除</div>
           
        </ul>`
                sum += item.goodsCount / 1
                count += (item.goodsPrice * item.goodsCount) / 1
                $(".car-content").html(str)

            })

            // 总价
            $("#money").html(count + "元")
            //总数量
            $("#count").html(sum)
        }, "json")
    }
    //-----给每一个选框添加点击事件------------
    $("main").on("click", ".check", function () {
        // console.log($(".check").eq(0).prop("checked"));
        $(this).toggleClass('actv')
        if ($(".check").length == $(".actv").length) {

            $("#check").prop("checked", true)
        } else {
            $("#check").prop("checked", false)
        }
        getCheckData()
    })
    //-----通过选框改变结算数据----------------
    function getCheckData() {
        let count = 0;
        let money = 0;
        for (i = 0; i < $(".check").length; i++) {
            // console.log($(".check")[i].prop("checked"));
            if ($(".check").eq(i).prop("checked") == true) {
                count += $(".num").val() / 1
                money += ($(".xiaoji").html().split(" ")[1]) / 1
            }
        }
        $("#count").html(count)
        $("#money").html("¥ " + money)
    }

    // -------5.删除商品----
    $('.car-content').on('click', '.delshop', function () {
        $(this).parents('ul').remove();
        $.get("../Images/php/deleteGoods.php", { "vipName": getCookie("username"), "goodsId": $(this).parent().parent().attr("goodsid") },
            function (data) {
                console.log(data);
            })

    })



    // --------6.加--------
    $(".car-content").on("click", '.addnum', function () {
        let index = $(this).index(".addnum")
        let num = $(this).prev().val();   //来获取num的值
        num++;
        $(this).prev().val(num);

        console.log($(this).parent().parent().attr("goodsid"));
        console.log($(this).prev().val());
        console.log(getCookie('username'))
        $.get("../Images/php/updateGoodsCount.php", { vipName: getCookie('username'), goodsId: $(this).parent().parent().attr("goodsid"), goodsCount: $(this).prev().val() }, function (data) {
            console.log(data);
            if (data.trim() == '1') {
                getShoppingCart()
            }
        })

    })
    // --------7.减--------
    $(".car-content").on("click", '.minnum', function () {  //将点击元素帮定在tbody身上
        let index = $(this).index(".minnum")
        let num = $(this).next().val();   //来获取num的值
        num--;
        //对num进行判断
        if (num < 1) {
            num = 1
        }
        $(this).next().val(num);
        $.get("../Images/php/updateGoodsCount.php", { vipName: getCookie('username'), goodsId: $(this).parent().parent().attr("goodsid"), goodsCount: $(this).next().val() }, function (data) {
            console.log(data);
            if (data.trim() == '1') {
                getShoppingCart()
            }
        })

    })


    // 结算
    $(".account").on("click", function () {
        setTimeout(function () {
            window.location.href = "./zhifu.html"
        }, 1000)
    })





</script>